<template>
  <!-- 新增护理项目对话框
         confirm：点击确定按钮的回调函数
         confirmOnEnter：点击回车按钮提交
      -->
  <t-dialog header="新增护理项目" :visible.sync="addFormVisiable" width="40%" :confirmOnEnter="true" @close="closeAddDialog"
    @confirm="saveProject">
    <t-space direction="vertical" style="width: 100%">
      <!-- rule:绑定表单每一项的校验规则 -->
      <t-form :data="addFormData" labelWidth="calc(8em + 24px)" layout="inline" :rules="addFormRule"
        ref="nusrong_project_form" @reset="onReset" @submit="saveProjectToDB">
        <t-form-item label="护理项目名称" name="name">
          <t-input v-model="addFormData.name" placeholder="请输入护理项目名称"></t-input>
        </t-form-item>
        <t-form-item label="价格" name="price">
          <t-input v-model="addFormData.price" type="number" placeholder="请输入护理项目价格"></t-input>
        </t-form-item>
        <t-form-item label="护理项目单位" name="unit">
          <t-input v-model="addFormData.unit" placeholder="请输入护理项目名称"></t-input>
        </t-form-item>
        <t-form-item label="排序" name="orderNo">
          <t-input v-model="addFormData.orderNo" type="number" placeholder="请输入护理项目排序"></t-input>
        </t-form-item>
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="addFormData.status">
            <t-radio :checked="true" value="1">启用</t-radio>
            <t-radio :checked="false" value="0">禁用</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="护理图片" name="images">
          <t-upload ref="uploadRef1" action="http://localhost/api/upload/single" v-model="file" :autoUpload="autoUpload"
            :showImageFileName="showImageFileName" :sizeLimit="sizeLimit" theme="image" tips="请选择单张图片文件上传（上传成功状态演示）"
            accept="image/*" :onSuccess="onSuccess" :onRemove="onRemove">
          </t-upload>
        </t-form-item>
        <t-form-item label="护理项目描述" name="nursingRequirement">
          <t-textarea v-model="addFormData.nursingRequirement" placeholder="项目描述"></t-textarea>
        </t-form-item>
      </t-form>

    </t-space>
  </t-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';
import { saveNursing } from '@/api/nursing_project_api';
// 添加护理项目对话框显示和隐藏
defineProps(['addFormVisiable'])
const emit = defineEmits(['close'])

function closeAddDialog() {
  emit('close')
}

const nusrong_project_form = ref(null);

function onSuccess(context) {
  addFormData.value.image = context.response.data.msg
}

function onRemove() {
  addFormData.value.image = ""
}

// 添加表单，收集数据
const addFormData = ref({
  name: '',
  price: '',
  unit: '',
  orderNo: '',
  status: 1,
  image: '',
  nursingRequirement: ''
})

// 表单校验规则
const addFormRule = ref({
  name: [
    {
      required: true,
      message: "护理项目名是必填项",
      type: 'error',
      trigger: 'blur'
    },
    {
      min: 2,
      message: '至少需要两个字符，一个中文等于两个字符',
      type: 'warning',
      trigger: 'blur',
    }
  ],
  price: [
    {
      required: true,
      message: "价格是必填项",
    }
  ],
  unit: [
    {
      required: true,
      message: "单位是必填项",
    }
  ],
  orderNo: [
    {
      required: true,
      message: "排序是必填项",
    }
  ],
  status: [
    {
      required: true,
      message: "状态是必填项",
    }
  ],
  image: [
    {
      required: true,
      message: "图片是必填项",
    }
  ],
  nursingRequirement: [
    {
      required: true,
      message: "护理描述是必填项",
    }
  ],

})

const autoUpload = true
const showImageFileName = true
const sizeLimit = 1024 * 10
const file = ref([])

// 点击添加表单的确定按钮
const saveProject = () => {
  // 手动提交添加表单
  // 1、通过ref属性找到表单，手动提交
  nusrong_project_form.value.submit()
}
// 保存护理项目
const saveProjectToDB = async ({ validateResult, firstError }) => {

  if (validateResult === true) {
    MessagePlugin.success('保存成功');
    debugger
    await saveNursing(addFormData.value)
    addFormData.value = {
      name: '',
      price: '',
      unit: '',
      orderNo: '',
      status: 1,
      image: '',
      nursingRequirement: ''
    }
    emit('close')
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

</script>
